<!-- Dom模板 -->
<template>
  <div class="bottom_box">
    <!-- Dom内容 -->
              <div class="bottom_top">
                         <van-tabs v-model="active" @click="bottoClick()">
                            <van-tab
                            :title="item"
                            v-for="(item, index) in musicTops"
                            :key="index"
                            >{{ item.name }}</van-tab
                            >
                        </van-tabs>
              </div>
              <components :is="components" class="bottom_main"></components>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import BottBox from './bottBox.vue'
import BottHistory from './bofangHIstory'
import BootmShou from './bottomShou.vue'
import GoodBook from '../../pages/home/goodBook.vue'
export default {
    components:{
        BottBox,
        BottHistory,
        BootmShou,
        GoodBook
    },
  name: '',
  data() {
    return {
      msg: '测试',
      musicTops:["当前播放","历史播放","我的收藏","推荐好书"],
      active:0,
      topIndex:0,
      components:"BottBox"
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    
  },
  // Vue方法定义
  methods: {
      bottoClick(){
          if(this.active===0){
              this.components = "BottBox"
          }
          if(this.active===1){
            this.components = "BottHistory"
          }
          if(this.active===2){
              this.components = "BootmShou"
          }
          if(this.active===3){
              this.components = "GoodBook"
          }
      }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
    .bottom_main{
      height:auto;
       
    }
</style>